<script type="text/javascript">
var skor_edit;
var skor_delete;
$(document).ready(function(){
/* Start Variable Declaration */
    var skor_source;
    var skor_adapter;
    var skor_buttonAdd;
    var skor_searchField;
    var skor_grid=$('#skor_grid');
    
/* Grid And Toolbar Declaration */
    skor_buttonAdd = $("<button style='margin-left: 5px;'><img src='assets/images/icons/add.png'> Tambah Data</button>");
    skor_buttonAdd.jqxButton({ width : 120 });
    skor_buttonAdd.bind('click', function(){
		var rowid = skor_grid.jqxGrid('getdatainformation').rowscount + 1;
		var row = {};
		row['skor_id']=0;
		row['skor_nama']='';
		row['skor_keterangan']='';
		row['skor_aktif']=1;
		var commit = skor_grid.jqxGrid('addrow',rowid, row, 'top');
		skor_grid.jqxGrid('selectrow', 0);
		skor_grid.jqxGrid('beginrowedit', 0);
		$('#textboxeditorskor_gridskor_nama').focus();
	});
    skor_searchField = $('<input type="text" class="inputfield" name="skor_search" placeholder="Pencarian">');
    skor_searchField.jqxInput({ theme : global_theme });
	
	var juara_adapter = new $.jqx.dataAdapter({
		id : 'juara_id',
		datatype: "json",
		root : 'results',
		url: "index.php/c_juara/get_list",
		datafields: [
			{ name: 'juara_id' },
			{ name: 'juara_nama' }
		]
	});
	juara_adapter.dataBind();
	var level_adapter = new $.jqx.dataAdapter({
		id : 'level_id',
		datatype: "json",
		root : 'results',
		url: "index.php/c_level/get_list",
		datafields: [
			{ name: 'level_id' },
			{ name: 'level_nama' }
		]
	});
	level_adapter.dataBind();
	
    skor_source={
        url : 'index.php/c_skor/get_list',
        datatype : 'json',
        root : 'results',
		data : {search_text : ''},
        datafields : [
            { name : 'skor_id' },
            { name : 'skor_level_id' },
            { name : 'skor_juara_id' },
            { name : 'skor_angka' },
            { name : 'skor_aktif', type : 'boolean' },
            { name : 'level_nama' },
            { name : 'juara_nama' },
			{ name : 'skor_level_nama', value : 'skor_level_id', values : { source : level_adapter.records, value : 'level_id', name : 'level_nama' } },
			{ name : 'skor_juara_nama', value : 'skor_juara_id', values : { source : level_adapter.records, value : 'juara_id', name : 'juara_nama' } },
        ],
        beforeprocessing : function(data){
            skor_source.totalrecords = data[0].total;
        },
		addrow: function (rowid, rowdata, position, commit) {
			commit(true);
		},
		updaterow: function (rowid, rowdata, commit) {
			var params=JSON.stringify(rowdata);
			$.ajax({
				url : 'c_skor/save',
				method : 'post',
				data : {params:params},
				success : function(response){
					var res = $.parseJSON(response);
					skor_grid.jqxGrid('updatebounddata');
					$.global_show_notif(MSAVE_SUCCESS,'success');
				}
			});
			commit(true);
		}
    }
    skor_adapter = new $.jqx.dataAdapter(skor_source);
   
    skor_grid.jqxGrid({
        source : skor_adapter,
        width : '100%',
        theme : global_theme,
        pagesize : 15,
        pagesizeoptions : [15],
        sortable : true,
		pageable: true,
        filterable : true,
        columnsresize : true,
        autoheight : true,
        virtualmode : true,
        showtoolbar: true,
		editable: true,
		selectionmode: 'singlerow',
		editmode: 'selectedrow',
        rendertoolbar: function (toolbar) {
            var me = this;
            var container = $("<div style='margin: 5px;'></div>");
            container.append(skor_buttonAdd);
            container.append(' | ');
            container.append(skor_searchField);
            toolbar.append(container);
        },
        rendergridrows : function(){
            return skor_adapter.records;
        },
        columns : [
            { text : 'Id', dataField : 'skor_id', hidden : true, columntype: 'textbox' },
            { text : 'Level', dataField : 'skor_level_id', displayField : 'level_nama', columntype: 'combobox', initeditor: function (row, column, editor) {
					editor.jqxComboBox({ source: level_adapter, promptText: "Please Choose:", displayMember: "level_nama",
					valueMember: "level_id" });
					editor.on('bindingComplete',function(){
						var data_record = skor_grid.jqxGrid('getrowdata', row);
						editor.jqxComboBox('val', data_record.skor_level_id);
					});
				} 
			},
            { text : 'Juara', dataField : 'skor_juara_id', displayField : 'juara_nama', columntype: 'combobox', initeditor: function (row, column, editor) {
					editor.jqxComboBox({ source: juara_adapter, promptText: "Please Choose:", displayMember: "juara_nama",
					valueMember: "juara_id" });
					editor.on('bindingComplete',function(){
						var data_record = skor_grid.jqxGrid('getrowdata', row);
						editor.jqxComboBox('val', data_record.skor_juara_id);
					});
				} 
			},
            { text : 'Skor', dataField : 'skor_angka', columntype: 'textbox' },
            { text : 'Aktif', dataField : 'skor_aktif', columntype: 'checkbox', width : 50 },
			{ text : '&nbsp;', width: 30, editable: false, cellsrenderer : function(row){
					var record = skor_grid.jqxGrid('getrowdata', row);
					var id = record.skor_id;
					return '<img src="assets/images/icons/delete.png" id="skordelbtn_' + id + '" onClick="skor_delete(event, ' + id + ')" title="Hapus Data" style="margin:2px 7px 2px 7px;"/>';
				}
			}
        ]
    });
/* Function Declaration */
	function fskor_delete(e, skor_id){
		$.global_show_confirm('Peringatan',MCONFIRM_DELETE_MASTER);
		$("#confirm_window_ok").unbind('click').click(function(){
			var process = $.global_show_processing();
			$.ajax({
				url : 'c_skor/delete',
				method : 'post',
				data : {skor_id:skor_id},
				success : function(response){
					process.hide();
					var res = $.parseJSON(response);
					skor_grid.jqxGrid('updatebounddata');
					$.global_show_notif(MSAVE_SUCCESS,'success');
				}
			});
			return false;
		});
	}
	skor_delete = fskor_delete;
	skor_searchField.on('keydown', function(e){
		if(e.keyCode == 13){
			skor_source['data']['search_text'] = $(this).val();
			skor_grid.jqxGrid('gotopage',0);
			skor_grid.jqxGrid('updatebounddata');
		}
	});
});
</script>
<div>
    <div id="skor_grid"></div>
</div>